<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>我的订单 - 达内学子商城</title>
    <link href="../css/orders.css" rel="stylesheet"/>
    <link href="../css/header.css" rel="stylesheet"/>
    <link href="../css/footer.css" rel="stylesheet"/>
    <link href="../css/personage.css" rel="stylesheet" />
    <link href="../css/common.css" rel="stylesheet" />
</head>
<body>
<!-- 顶部区域 -->
<c:import url="header.jsp"></c:import>
<!-- 我的订单导航栏-->
<div id="nav_order">
    <ul>
        <li><a href="">首页<span>&gt;</span>个人中心</a></li>
    </ul>
</div>
<!--我的订单内容区域 #container-->
<div id="container" class="clearfix">
    <!-- 左边栏-->
    <c:import url="user_left_side_bar.jsp"></c:import>
   <!-- 右边栏-->
    <div class="rightsidebar_box rt">	
        <!--标题栏-->
        <div class="rs_header">
            <span class="address_title">收获地址管理</span>
        </div>        		   		
            <!--已有地址栏-->
            <div class="address_list">
                <div class="header">
                    <span class="tag ">地址名称</span>
                	<span class="name ">姓名</span>
                    <span class="addr ">地址详情</span>
                    <span class="phone ">联系电话</span>
                    <span class="op ">操作</span>
                </div>
	            <div id="address_list">
	                <div class="content content_active">
	                    <span class="tag tag_active">办公室</span>
	                    <span class="name ">杨洋</span>
	                    <span class="addr ">北京市海淀区北下关街道中鼎大厦B座331</span>
	                    <span class="phone ">18435110514</span>
	                    <span class="op ">
	                    	<a href="###">修改</a>|
	                    	<a href="###">删除</a>
	                    </span>
	                    <span class="set_default"><a href="###"></a></span>
	                </div>
	                <div class="content">
	                    <span class="tag tag_normal">家里</span>
	                    <span class="name">杨洋</span>
	                    <span class="addr ">北京市大兴区西红门镇瑞海家园</span>
	                    <span class="phone">13788882346</span>
	                    <span class="op ">
	                    	<a href="###">修改</a>|
	                    	<a href="###">删除</a>
	                    </span>
	                    <span class="set_default"><a href="###">设为默认</a></span>
	                </div>
               </div>
            </div>
        	<div class="button-block">
               <a href="#" onclick="showPopup(0)" 
               class="button-blue">新增收货地址</a>
            </div>
        </div>
    </div>
</div>

<!-- 品质保障，私人定制等-->
<div id="foot_box">
    <div class="icon1 lf">
        <img src="../images/footer/icon1.png" alt=""/>

        <h3>品质保障</h3>
    </div>
    <div class="icon2 lf">
        <img src="../images/footer/icon2.png" alt=""/>

        <h3>私人定制</h3>
    </div>
    <div class="icon3 lf">
        <img src="../images/footer/icon3.png" alt=""/>

        <h3>学员特供</h3>
    </div>
    <div class="icon4 lf">
        <img src="../images/footer/icon4.png" alt=""/>

        <h3>专属特权</h3>
    </div>
</div>
<!-- 页面底部-->
<div class="foot_bj">
    <div id="foot">
        <div class="lf">
             <p class="footer1"><img src="../images/footer/logo.png" alt="" class=" footLogo"/></p>
             <p class="footer2"><img src="../images/footer/footerFont.png" alt=""/></p>
        </div>
        <div class="foot_left lf">
            <ul>
                <li><a href="#"><h3>买家帮助</h3></a></li>
                <li><a href="#">新手指南</a></li>
                <li><a href="#">服务保障</a></li>
                <li><a href="#">常见问题</a></li>
            </ul>
            <ul>
                <li><a href="#"><h3>商家帮助</h3></a></li>
                <li><a href="#">商家入驻</a></li>
                <li><a href="#">商家后台</a></li>
            </ul>
            <ul>
                <li><a href="#"><h3>关于我们</h3></a></li>
                <li><a href="#">关于达内</a></li>
                <li><a href="#">联系我们</a></li>
                <li>
                    <img src="../images/footer/wechat.png" alt=""/>
                    <img src="../images/footer/sinablog.png" alt=""/>
                </li>
            </ul>
        </div>
        <div class="service">
            <p>学子商城客户端</p>
            <img src="../images/footer/ios.png" class="lf">
            <img src="../images/footer/android.png" alt="" class="lf"/>
        </div>
        <div class="download">
            <img src="../images/footer/erweima.png">
        </div>
		<!-- 页面底部-备案号 #footer -->
        <div class="record">
            &copy;2017 达内集团有限公司 版权所有 京ICP证xxxxxxxxxxx
        </div>
    </div>
</div>
	<div id="mask">
	</div>
	<!-- 弹出窗口 -->
	<div id="popup_content">
		
		<!-- 标题 -->
		<h3>新增收货地址</h3>
		<!-- 表单 -->
		<!--收货人信息填写栏-->
        <div class="rs_content">
        	<form id="address-form" method="post" action="">
	            <!--收货人姓名-->
	            <div class="recipients">
	                <span class="red">*</span>
	                <span class="kuan">收货人：</span>
	                <input type="text" 
	                name="recvName" 
	                id="recvName"/>
	            </div>
	            <!--收货人所在城市等信息-->
	            <div data-toggle="distpicker" 
	            class="address_content">
					 <span class="red">*</span>
					 <span class="kuan">省&nbsp;&nbsp;份：</span>
					 <select 
					 name="recvProvince"
					 data-province="---- 选择省 ----" 
					 id="recvProvince"
					 onchange="getCities()"></select>
					  城市：
					  <select 
					  name="recvCity"
					  data-city="---- 选择市 ----" 
					  id="recvCity"
					  onchange="getAreaes()"></select>
					  区/县：
					  <select
					  name="recvArea" 
					  data-district="---- 选择区 ----" 
					  id="recvArea"></select>
				</div> 
	            
	            
	            <!--收货人详细地址-->
	            <div class="address_particular">
	                <span class="red">*</span>
	                <span class="kuan">详细地址：</span>
	                <textarea name="recvAddr" 
	                id="recvAddr" 
	                cols="60" rows="3" 
	                placeholder="建议您如实填写详细收货地址">
	                </textarea>
	            </div>
	            <!--收货人地址-->
	            <div class="address_tel">
	                <span class="red">*</span>
	                <span class="kuan">手机号码：</span>
	                <input type="tel" 
	                id="recvPhone" 
	                name="recvPhone"/>固定电话：
	                <input type="text" 
	                name="recvTel" 
	                id="recvTel"/>
	            </div>
	            <!--邮政编码-->
	            <div class="address_postcode">
	                <span class="red">&nbsp;</span class="kuan">
	                <span>邮政编码：</span>&nbsp;
	                <input type="text" name="recvZip" id="recvZip"/>
	            </div>
	            <!--地址名称-->
	            <div class="address_name">
	                <span class="red">&nbsp;</span class="kuan">
	                <span>地址名称：</span>&nbsp;
	                <input type="text" 
	                id="recvTeg" 
	                name="recvTeg"/>如：
	                <span class="sp">家</span>
	                <span class="sp">公司</span>
	                <span class="sp">宿舍</span>
	            </div>
	            <!--保存收货人信息-->
	            <div class="buttons-block">
	            	<input type="hidden" name="id" id="id"/>
	                <a href="#" onclick="postForm()" class="button-blue">保存收货 </a>
	            	<a href="#" onclick="dismissPopup()" class="button-blue">取消</a>
	            </div>
	            </form>
	</div>
	</div>
</body>
<script type="text/javascript" src="../js/jquery-3.1.1.min.js"></script>
<script src="../js/jquery.page.js"></script>
<script type="text/javascript" src="../js/orders.js"></script>
<!--  <script type="text/javascript" src="../js/distpicker.data111.js"></script>
<script type="text/javascript" src="../js/distpicker111.js"></script>-->
<script type="text/javascript" src="../js/personal.js"></script>
<script type="text/javascript">
var htmlTemplate=' <div class="content %CONTENT_ACTIVE%">'
+ '<span class="tag %TAG_ACTIVE%">%TAG%</span>'
+ '<span class="name">%NAME%</span>'
+ '<span class="addr ">%ADDRESS%</span>'
+ '<span class="phone">%PHONE%</span>'
+'<span class="op ">'
+	'<a href="###" onclick="showPopup(%ID%)">修改</a>|'
+	'<a href="###" onclick="deleteAddress(%ID%)">删除</a>'
+ '</span>'
+ '<span class="set_default">'
+ '<a href="###" onclick="setDefault(%ID%)" style="display: %SET_DEFAULT%;">设为默认</a>'
+ '</span>'
+ '</div> ';
function deleteAddress(id){
	var c=confirm("您确定要删除吗？");
	if(c==false){
		return;
	}
	var url="delete.do";
	var data="id="+id;
	$.ajax({
		"url":url,
		"type":"GET",
		"data":data,
		"dataType":"json",
		"success":function(obj){
			alert(obj.message);
			if(obj.stage==1){
				showAddressList();
			}
		},
		"error":function(){
			location.href="../user/login.do";
		}
	});
}
function setDefault(id){
	var url="setDefault.do";
	var data="id="+id;
	$.ajax({
		"url":url,
		"type":"GET",
		"data":data,
		"dataType":"json",
		"success":function(obj){
			alert(obj.message);
			if(obj.stage==1){
				showAddressList();
			}
		},
		"error":function(){
			location.href="../user/login.do";
		}
	});
}
function showAddressList(){
	var url="get_list.do";
	$.ajax({
		"url":url,
		"type":"GET",
		"dataType":"json",
		"success":function(obj){
			$("#address_list").empty();
			var htmlString="";
			for(var i=0;i<obj.data.length;i++){
				var address=obj.data[i];
				htmlString +=htmlTemplate;
				htmlString=htmlString.replace("%TAG%",address.recvTeg);
				htmlString=htmlString.replace("%NAME%",address.recvName);
				htmlString=htmlString.replace("%ADDRESS%",address.recvDistrict+address.recvAddr);
				htmlString=htmlString.replace("%PHONE%",address.recvPhone);
				htmlString=htmlString.replace(/%ID%/g,address.id);
				if(address.isDefault==1){
					htmlString=htmlString.replace("%CONTENT_ACTIVE%","content_active");
					htmlString=htmlString.replace("%TAG_ACTIVE%","tag_active");
					htmlString=htmlString.replace("%SET_DEFAULT%","none");
				}else{
					htmlString=htmlString.replace("%CONTENT_ACTIVE%","");
					htmlString=htmlString.replace("%TAG_ACTIVE%","tag_normal");
					htmlString=htmlString.replace("%SET_DEFAULT%","inline");
				}
			}
			$("#address_list").html(htmlString);
		}
	});
}

function showPopup(id){
	$("#address-form")[0].reset();
	
	$("#id").val(id);
	
	var title=id==0 ? "新增收货地址":"修改收货地址";
	$("#popup_content h3").html(title);
	var popupWidth=700;
	var popupHeight=450;

	var windowWidth=$(window).width();
	var windowHeight=$(window).height();
	
	$("#mask").show();
	$("#mask").css({"width":windowWidth,"height":windowHeight});
	
	
	$("#popup_content").css({"width":popupWidth,"height":popupHeight,"left":(windowWidth-popupWidth)/2,"top":120});
	$("#popup_content").show();
	
	if(id !=0){
		var url="get.do";
		var data="id="+id;
		$.ajax({
			"url":url,
			"data":data,
			"type":"GET",
			"dataType":"json",
			"success":function(obj){
				var address=obj.data;
				$("#recvName").val(address.recvName);
				$("#recvAddr").val(address.recvAddr);
				$("#recvPhone").val(address.recvPhone);
				$("#recvTel").val(address.recvTel);
				$("#recvZip").val(address.recvZip);
				$("#recvTeg").val(address.recvTeg);
				
				//加载省的列表			
				var url="../dict/provinces.do";
				$.ajax({
					"url":url,
					"type":"GET",
					"dateType":"json",
					"success":function(obj){
						for(var i=0;i<obj.data.length;i++){
						var op=document.createElement("option");
						op.value=obj.data[i].code;
						op.text=obj.data[i].name;
						document.getElementById("recvProvince").appendChild(op);
						}
						$("#recvProvince").val(address.recvProvince);
						getCities(address.recvCity,address.recvArea);
						
					}
				});
			},
			"error":function(){
				location.href="../user/login.do";
			}
		});
	}else{
	
	//加载省的列表			
		var url="../dict/provinces.do";
		$.ajax({
			"url":url,
			"type":"GET",
			"dateType":"json",
			"success":function(obj){
				for(var i=0;i<obj.data.length;i++){
				var op=document.createElement("option");
				op.value=obj.data[i].code;
				op.text=obj.data[i].name;
				document.getElementById("recvProvince").appendChild(op);
				}
			}
		});
	}
}

function getCities(cityCode,areaCode){
	$("#recvCity").empty();
	var url="../dict/cities.do";
	var data="parent="+$('#recvProvince').val();
	$.ajax({
		"url":url,
		"data":data,
		"type":"GET",
		"dateType":"json",
		"success":function(obj){
			for(var i=0;i<obj.data.length;i++){
			var op=document.createElement("option");
			op.value=obj.data[i].code;
			op.text=obj.data[i].name;
			document.getElementById("recvCity").appendChild(op);
			}
			$("#recvCity").val(cityCode);
			getAreaes(areaCode);
		}
	});
	
}

function getAreaes(AreaCode){
	$("#recvArea").empty();
	var url="../dict/areaes.do";
	var data="parent="+$('#recvCity').val();
	$.ajax({
		"url":url,
		"data":data,
		"type":"GET",
		"dateType":"json",
		"success":function(obj){
			for(var i=0;i<obj.data.length;i++){
			var op=document.createElement("option");
			op.value=obj.data[i].code;
			op.text=obj.data[i].name;
			document.getElementById("recvArea").appendChild(op);
			}
			$("#recvArea").val(AreaCode);
		}
	});
	
}

function postForm(){
	var id=$("#id").val(); 
	var url=id==0 ? "../address/add.do" : "handle_update.do";
	var data=$('#address-form').serialize();
	console.log(id);
	$.ajax({
		"url":url,
		"data":data,
		"type":"POST",
		"dataType":"json",
		"success":function(obj){
			alert(obj.message);
			dismissPopup();
			showAddressList();
		},
		"error":function(){
			location.href="../user/login.do";
		}
	});
}

function dismissPopup(){
	$("#mask").hide();
	$("#popup_content").hide();
}	



	$(".lxdh_normal").each(function(i,e) {
		var phone = $(e).html();
		$(e).html(changePhone(phone));
	});
	$(function(){
		$("#leftsidebar_box dd").hide();
		$("#leftsidebar_box .address dd").show();
		$("#leftsidebar_box dt img").attr("src","../images/myOrder/myOrder2.png");
    	$("#leftsidebar_box .address ").find('img').attr("src","../images/myOrder/myOrder1.png");
    	showAddressList();
	});
</script>
</html>